<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件与循环</title>
</head>
<body>
    <!--官方指南：https://cn.vuejs.org/v2/guide/index.html-->
    <div id="app">
        <span v-if="seen">现在你看到我了！</span>
    </div>

    <div id="app-2">
        <ol>
            <li v-for="todo in todos">
                {{ todo.text }}
            </li>
        </ol>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
    <script type="text/javascript">
        var app = new Vue({
           el:"#app",
           data:{
               seen:true
           }
        });

        app.seen=false;

        var app2 = new Vue({
            el:"#app-2",
            data:{
                todos:[
                    {text:"学习 JavaScript"},
                    {text:"学习 Vue"},
                    {text:"整个牛项目"}
                ]
            }
        });
        app2.todos.push({text:'新项目'});
    </script>
</body>
</html>